<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>磁盘管理</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link href="../image/kl_logo.png" rel="icon" type="image/png">
</head>
<body>
<div style="display: flex; justify-content: space-between;">
    <div style="display:flex">
        <div class="layui-form">
            <form name="searchForm">
                <label>集群</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <select name="clusterId"></select>
                </div>

                <label>存储池</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <select name="storageId"> </select>
                </div>
                <label>VM</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <select name="vmId"> </select>
                </div>
                <div class="layui-input-inline">
                    <div class="layui-btn layui-btn-sm" lay-filter="formSearch"
                         onclick="search_volume_click()"><i class="layui-icon layui-icon-search"></i>搜索
                    </div>
                    <div class="layui-btn layui-btn-sm" lay-filter="formSearch"
                         onclick="create_volume_click()"><i class="layui-icon layui-icon-addition"></i>创建磁盘
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div style="display:flex">
        <div class="layui-form-item" style="margin-right: 0px">
            <div class="layui-input-block" style="margin-left:0px">
                <input autocomplete="off" class="layui-input" id="searchText" lay-verify="required" placeholder="关键字"
                       required="" style="width:200px" type="text">
            </div>
        </div>
    </div>

</div>

<div id="content">

</div>
</body>

<script id="createDialog" type="text/html">
    <form class="layui-form" name="modify" action="" style="padding: 20px;padding-bottom: 5px;" lay-filter="modify">
        <div class="layui-form-item" style="margin-bottom:5px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">磁盘名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入磁盘名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom:5px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">选择集群</label>
            <div class="layui-input-inline">
                <select name="clusterId" lay-filter="createClusterId" id="createClusterId" lay-verify="required">
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="margin-bottom:5px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">选择存储池</label>
            <div class="layui-input-inline">
                <select name="storageId">
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom:0px;">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">磁盘容量</label>
            <div class="layui-input-inline">
                <input type="text" name="size" value="100" onkeyup="value=verify_number(this.value)"
                       width="30px" autocomplete="off"
                       class="layui-input" style="width:100px;display:inline;float:left">
                <div class="layui-input-inline" style="width:30px;padding-top:10px;padding-left: 10px;">GB</div>
            </div>

        </div>
    </form>
</script>

<script id="viewDialog" type="text/html">
    <form class="layui-form" action="" style="padding: 0px;" lay-filter="view">
        <div class="layui-form-item">
            <table class="layui-table" style="margin: 0;" lay-size="sm">
                <tbody>
                <tr>
                    <th>磁盘ID</th>
                    <td id="view_id"></td>
                    <th>所属集群</th>
                    <td id="view_clusterName"></td>
                </tr>
                <tr>
                    <th>磁盘名称</th>
                    <td id="view_name"></td>
                    <th>所属存储</th>
                    <td id="view_storageName"></td>
                </tr>
                <tr>
                    <th>挂载VM</th>
                    <td id="view_vmName"></td>
                    <th>挂载路径</th>
                    <td id="view_target"></td>
                </tr>
                <tr>
                    <th>申请容量</th>
                    <td id="view_capacity"></td>
                    <th>物理大小</th>
                    <td id="view_allocation"></td>
                </tr>
                <tr>
                    <th>状态</th>
                    <td id="view_status">&nbsp;</td>
                    <th>创建时间</th>
                    <td id="view_createTime"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </form>
</script>
<script id="resizeDialog" type="text/html">
    <form class="layui-form" name="modify" action="" style="padding: 20px;padding-bottom: 5px;" lay-filter="modify">
        <input type="hidden" name="id"/>
        <div class="layui-form-item" style="margin-bottom:0px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">新增(GB)</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <input type="text" name="size" onkeyup="value=verify_number(this.value)"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </form>
</script>
<script id="attachDialog" type="text/html">
    <form class="layui-form" name="modify" action="" style="padding: 20px;padding-bottom: 5px;" lay-filter="modify">
        <input type="hidden" name="volume"/>
        <div class="layui-form-item" style="margin-bottom:0px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">选择虚拟机</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <select name="id"></select>
                </div>
            </div>
        </div>
    </form>
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/config_util.js"></script>
<script src="../layui/layui.js"></script>
<script src="../js/util.js"></script>
<script src="../js/table_util.js"></script>
<script src="../js/data_handler.js"></script>
<script src="../js/data_util.js"></script>
<script src="../js/dialog_util.js"></script>
<script src="../js/render_util.js"></script>
<script>

    config_util.init(()=> {
        render_util.render_search_cluster_select($("form[name='searchForm'] select[name='clusterId']"))
        render_util.render_search_storage_select($("form[name='searchForm'] select[name='storageId']"))
        render_util.render_search_vm_select($("form[name='searchForm'] select[name='vmId']"))
        window.volume_table_util = new table_util()
        window.data_handler = new data_handler({
            elem: "form[name='searchForm']",
            uri: config_util.base_uri + "/management/volume/search",
            idName: "id"
        })

        volume_table_util.render({
            elem: "#content",
            idName: "id",
            page: true,
            cols: [
                {title: "ID", name: "id", filter: true},
                {title: "名称", name: "name", filter: true},
                {
                    title: "集群", name: "clusterId", render: function (data) {
                        return data_util.get_cluster_name_by_id(data.clusterId)
                    }, filter: true
                },
                {
                    title: "存储", name: "storageId", render: function (data) {
                        return data_util.get_storage_name_by_id(data.storageId)
                    }, filter: true
                },
                {
                    title: "挂载", name: "vmId", render: function (data) {
                        return data_util.get_vm_name_by_id(data.vmId)
                    }, filter: true
                },
                {
                    title: "类型", name: "type", render: function (data) {
                        return data.device === 0 && data.vmId > 0 ? "ROOT" : "DATA"
                    }, filter: true
                },
                {
                    title: "状态", name: "status", render: function (data) {
                        return render_util.render_status(data.status)
                    }, filter: true
                },
                {
                    width: 180, title: "创建时间", render: function (data) {
                        return dateFormat("YYYY-mm-dd HH:MM:SS", new Date(data.createTime))
                    }
                }
            ],
            menu: [
                {
                    title: "磁盘详情", icon: "layui-icon-form", show: function (data) {
                        return true
                    }, click: view_volume_click
                },
                {
                    title: "磁盘扩容", icon: "layui-icon-screen-full", show: function (data) {
                        return data.status === "Ready"
                    }, click: resize_volume_click
                },
                {
                    title: "挂载磁盘", icon: "layui-icon-link", show: function (data) {
                        return data.status != "Destroy" && data.vmId === 0
                    }, click: attach_volume_click
                },
                {
                    title: "卸载磁盘", icon: "layui-icon-unlink", show: function (data) {
                        return data.status != "Destroy" && data.vmId > 0 && data.device > 0
                    }, click: detach_volume_click
                },
                {
                    title: "销毁磁盘", icon: "layui-icon-delete", show: function (data) {
                        return data.status != 'Destroy' && data.vmId === 0
                    }, click: destroy_volume_click
                },
                {
                    title: "恢复磁盘", icon: "layui-icon-time", show: function (data) {
                        return data.status === 'Destroy'
                    }, click: resume_volume_click
                },
            ],
            handler: window.data_handler
        })
        $("#searchText").on('input', function () {
            volume_table_util.filter_text = $("#searchText").val()
            volume_table_util.refresh();
        })
    })

    function search_volume_click() {
        window.data_handler.refresh();
        volume_table_util.refresh();
    }

    function view_volume_click(view_data) {
        dialog_util.show_view("#viewDialog", "查看磁盘", "layui-icon-form", function () {
            $("#view_id").html(view_data.id);
            $("#view_name").html(view_data.name);
            $("#view_clusterName").html(data_util.get_cluster_name_by_id(view_data.clusterId));
            $("#view_storageName").html(data_util.get_storage_name_by_id(view_data.storageId));
            $("#view_vmName").html(data_util.get_vm_name_by_id(view_data.vmId));
            $("#view_capacity").html(render_util.get_disk_capacity(view_data.capacity));
            $("#view_allocation").html(render_util.get_disk_capacity(view_data.allocation));
            $("#view_target").html(view_data.target);
            $("#view_status").html(view_data.status);
            $("#view_createTime").html(dateFormat("YYYY-mm-dd HH:MM:SS", new Date(view_data.createTime)));
        })
    }

    function create_volume_click() {
        dialog_util.show_modify("#createDialog", "创建磁盘", "layui-icon-addition", "POST", config_util.base_uri+"/management/volume/create", function () {
            form.on("select(createClusterId)", function (data) {
                render_util.render_edit_storage_select(parseInt(data.value), $("form[name='modify'] [name='storageId']"));
            });
            {
                render_util.render_edit_cluster_select($("form[name='modify'] [name='clusterId']"))
                let clusterId = parseInt($("form[name='modify'] [name='clusterId']").val());
                render_util.render_edit_storage_select(clusterId, $("form[name='modify'] [name='storageId']"));
            }
        }, function (response) {
            if (response.code === 0) {
                volume_table_util.append(response.data);
            } else {
                dialog_util.show_tool_tip('添加磁盘失败，错误码:' + response.code + '。错误信息:' + response.message);
            }
        })
    }

    function resize_volume_click(data) {
        dialog_util.show_modify("#resizeDialog", "扩容磁盘", "layui-icon-full", "POST", config_util.base_uri+"/management/volume/resize", function () {
            $(`form[name='modify'] [name='id']`).val(data.id)
        }, function (response) {
            if (response.code === 0) {
                volume_table_util.modify(response.data);
            } else {
                dialog_util.show_tool_tip('扩容磁盘失败，错误码:' + response.code + '。错误信息:' + response.message);
            }
        })
    }

    function attach_volume_click(data) {
        dialog_util.show_modify("#attachDialog", "挂载磁盘", "layui-icon-link", "POST", config_util.base_uri+"/management/vm/attach/disk", function () {
            $(`form[name='modify'] [name='volume']`).val(data.id)
            render_util.render_attach_vm(data.clusterId, $(`form[name='modify'] [name='id']`))
        }, function (response) {
            if (response.code === 0) {
                volume_table_util.modify(response.data);
            } else {
                dialog_util.show_tool_tip('挂载磁盘失败，错误码:' + response.code + '。错误信息:' + response.message);
            }
        })
    }

    function detach_volume_click(data) {
        dialog_util.show_confirm_dialog('确认取消挂载', 'POST', config_util.base_uri+"/management/vm/detach/disk", {
            volume: data.id,
            id: data.vmId
        }, function (response) {
            if (response.code === 0) {
                volume_table_util.modify(response.data);
            } else if (response.code) {
                dialog_util.show_tool_tip('取消挂载失败，错误码:' + response.code + '。错误信息:' + response.message);
            }
        })
    }

    function destroy_volume_click(data) {
        dialog_util.show_confirm_dialog('确认删除磁盘', 'POST', config_util.base_uri+"/management/volume/destroy", {id: data.id}, function (response) {
            if (response.code === 0) {
                volume_table_util.modify(response.data);
            } else if (response.code) {
                dialog_util.show_tool_tip('销毁磁盘失败，错误码:' + response.code + '。错误信息:' + response.message);
            }
        })
    }

    function resume_volume_click(data) {
        dialog_util.show_confirm_dialog('确认恢复磁盘', 'POST', config_util.base_uri+"/management/volume/resume", {id: data.id}, function (response) {
            if (response.code === 0) {
                volume_table_util.modify(response.data);
            } else if (response.code) {
                dialog_util.show_tool_tip('恢复磁盘失败，错误码:' + response.code + '。错误信息:' + response.message);
            }
        })
    }



</script>